<%@page import="helpers.UrlHelper"%>
<%@page import="entities.User"%>
<%@page import="com.google.appengine.api.images.ImagesServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesService"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreService"%>
<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%
BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
ImagesService imagesService = ImagesServiceFactory.getImagesService();
User user = (User) request.getAttribute("user");
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    
    <link href="/user/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="/user/css/style.css" rel="stylesheet" media="screen">
    <link href="/user/css/font-awesome.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Boogaloo">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Economica:700,400italic">
    <script src="/user/js/jquery.min.js" type="text/javascript"></script>
    <script src="/user/js/bootstrap.js" type="text/javascript"></script>
 </head>
<body>
<div class="container">
	<div class="row-fluid" id="profile">
		<!-- Profile Info BEGIN -->
		<div class="span3 profile-info">
			<div class="avatar">
				<% 
					if (user.getAvatar() != null && !user.getAvatar().isEmpty())  {
						 BlobKey blobKey = new BlobKey(user.getAvatar());
				%>
				<img class="img-polaroid" alt="" src="<%=imagesService.getServingUrl(blobKey) %>=s140-c"><br />
				<% } else { %>							
				<img class="img-polaroid" src="/user/images/icon-author.jpg"  width="140" />
				<% } %>
			</div>
			
			<h2 class="name-info ">
				<%=user.getName() %>
			</h2>
			
			<div class="details">
				<p><i class="icon-home"></i> <%=user.getWebsite() %></p>
				<p><i class="icon-globe"></i> <%=user.getAboutme() %> </p>
			</div>
			
			<h2 class="dashboard">
				Dashboard <i class="icon-cogs"></i>
			</h2>
			
			<ul>
                <li><span class="phone-480px"></span><a href="/">Homepage</a></li>
                <li><span class="phone-480px"></span><a href="/profile/edit">Change Profile</a></li>
                <li><span class="phone-480px"></span><a href="/profile/change-avatar">Change Avatar</a></li>
                <li><span class="phone-480px"></span><a href="/profile/article/list">My Articles</a></li>
                <li><span class="phone-480px"></span><a href="/profile/article/submit">Submit Article</a></li>
                <li><span class="phone-480px"></span><a href="/profile/logout">Logout</a></li>
            </ul>
			
			
		</div>
		<!-- Profile Info END -->
		
		<div class="span9 profile-content">